<template>
	<el-row class="index">
		<el-col :span="24" class="content-header">每日统计</el-col>
		<el-row class="content-box" :gutter="20">
			<el-col :span="6">
				<el-card class="box-card" :body-style="bodyStyle">
					<span class="info"><i class="fa fa-group"></i></span>
					<div class="statistics">
						<el-row >
							<el-col :span="24">
								统计数量1
							</el-col>
							<el-col :span="24" class="number">
								{{count1}}
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card" :body-style="bodyStyle">
					<span class="user"><i class="fa fa-user"></i></span>
					<div class="statistics">
						<el-row >
							<el-col :span="24">
								统计数量2
							</el-col>
							<el-col :span="24" class="number">
								{{count2}}
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card" :body-style="bodyStyle">
					<span class="barcode"><i class="fa fa-barcode"></i></span>
					<div class="statistics">
						<el-row >
							<el-col :span="24">
								统计数量3
							</el-col>
							<el-col :span="24" class="number">
								{{count3}}
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card class="box-card" :body-style="bodyStyle">
					<span class="bar-chart"><i class="fa fa-bar-chart-o"></i></span>
					<div class="statistics">
						<el-row >
							<el-col :span="24">
								统计数量4
							</el-col>
							<el-col :span="24" class="number">
								{{count4}}
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-collapse v-model="activeName" class="box">
			  	<el-collapse-item title="首页工作台" name="1">
				    <el-row :gutter="20">
				    	<el-col :span="16">
				    		<el-table style="width: 100%" :data="tableData" :show-header="showHeader" stripe :size="size" :cell-style="cellStyle">
						    	<el-table-column prop="title"></el-table-column>
						    	<el-table-column prop="count"></el-table-column>
						  	</el-table>
				    	</el-col>
				    	<el-col :span="8" class="progress-div">
				    		<el-row v-for="item in progressData" :key="item.title">
				    			<el-col :span="24">
				    				<el-col :span="12">{{item.title}}</el-col>
				    				<el-col :span="12" class="textright">{{item.content}}</el-col>
				    			</el-col>
				    			<el-col :span="24">
				    				<el-progress :percentage="item.percentage"></el-progress>
				    			</el-col>
				    		</el-row>
				    	</el-col>
				    </el-row>
				</el-collapse-item>
				<el-collapse-item title="首页工作台" name="2">
				    <div>(这里是其他的内容)与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
				    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
				</el-collapse-item>
			</el-collapse>
		</el-row>
	</el-row>
</template>
<script>
    import './index.scss';
    import router from '@/router/index';

    export default { 
        data () {
            return {
            	bodyStyle : {
            		padding : '0px',
            		height : '90px',
            		width : '100%',
					height : '90px',
					color : '#FFF'
            	},
            	activeName : "1",
            	count1 : 1000,
            	count2 : 2000,
            	count3 : 3000,
            	count4 : 4000,
            	tableData : [{
            		title : '待审核订单',
            		count : 1000
            	},{
            		title : '待支付订单',
            		count : 2000
            	},{
            		title : '待发货订单',
            		count : 3000
            	},{
            		title : '待签收订单',
            		count : 4000
            	},{
            		title : '退款订单',
            		count : 5000
            	}],
            	showHeader : false,
            	size : "medium",
            	progressData : [{
            		title : '待审核占比',
            		content : '1000/2000',
            		percentage : Number(1000/2000).toFixed(2)*100
            	},{
            		title : '待支付占比',
            		content : "2000/3000",
            		percentage : Number(2000/3000).toFixed(2)*100
            	},{
            		title : '待发货占比',
            		content : "1500/1800",
            		percentage : Number(1500/1800).toFixed(2)*100
            	},{
            		title : '待签收占比',
            		content : "1200/1800",
            		percentage : Number(1200/1800).toFixed(2)*100
            	},{
            		title : '退款占比',
            		content : "200/800",
            		percentage : Number(200/800).toFixed(2)*100
            	}]
            }
        },
        methods: {
        	cellStyle : function(row, rowIndex, columnIndex){
        		if(row.columnIndex == 1){
        			return {
        				color : "red",
        				textAlign : "right"
        			}
        		}
        	}
        },
        watch: {
            
        },
        created: function(){          
           
        },
        beforeDestroy:function(){
          
        }
    }
</script>